<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueSage 配置说明</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <div class="flex-shrink-0 flex items-center">
                        <a href="../index.html" class="text-2xl font-bold text-gray-900">VueSage</a>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            文档
                        </a>
                        <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            配置
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="px-4 py-6 sm:px-0">
            <div class="border-4 border-dashed border-gray-200 rounded-lg p-8">
                <h2 class="text-3xl font-bold text-gray-900 mb-8">VueSage 配置说明</h2>

                <section class="mb-12">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">配置文件</h3>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <p class="text-gray-600 mb-4">
                            在项目根目录创建 <code class="bg-gray-100 px-2 py-1 rounded">.vuesagerc.json</code> 文件来自定义配置：
                        </p>
                        <pre class="bg-gray-50 p-4 rounded"><code>{
  "rules": {
    "naming": {
      "enabled": true,
      "severity": "error",
      "options": {
        "componentPrefix": "App",
        "propsCasing": "camelCase"
      }
    },
    "props": {
      "enabled": true,
      "severity": "warning",
      "options": {
        "requireType": true,
        "requireDefault": true
      }
    },
    "template": {
      "enabled": true,
      "severity": "error",
      "options": {
        "maxLength": 80,
        "requireKey": true
      }
    }
  },
  "autofix": {
    "safeMode": true,
    "backup": true,
    "ignoreFiles": ["dist/**/*", "node_modules/**/*"]
  },
  "formatting": {
    "indentSize": 2,
    "maxLineLength": 100,
    "singleQuote": true
  }
}</code></pre>
                    </div>
                </section>

                <section class="mb-12">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">规则配置</h3>
                    <div class="space-y-6">
                        <!-- 命名规则 -->
                        <div class="bg-white p-6 rounded-lg shadow">
                            <h4 class="font-medium text-gray-900 mb-4">命名规则 (naming)</h4>
                            <div class="space-y-4">
                                <p class="text-gray-600">检查组件、props、方法等命名是否符合规范。</p>
                                <div class="bg-gray-50 p-4 rounded">
                                    <h5 class="font-medium text-gray-900 mb-2">选项说明：</h5>
                                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                        <li><strong>componentPrefix</strong>: 组件名称前缀</li>
                                        <li><strong>propsCasing</strong>: props命名风格 (camelCase/kebab-case)</li>
                                        <li><strong>methodCasing</strong>: 方法命名风格 (camelCase)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Props规则 -->
                        <div class="bg-white p-6 rounded-lg shadow">
                            <h4 class="font-medium text-gray-900 mb-4">Props规则 (props)</h4>
                            <div class="space-y-4">
                                <p class="text-gray-600">检查props定义的完整性和规范性。</p>
                                <div class="bg-gray-50 p-4 rounded">
                                    <h5 class="font-medium text-gray-900 mb-2">选项说明：</h5>
                                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                        <li><strong>requireType</strong>: 是否要求声明类型</li>
                                        <li><strong>requireDefault</strong>: 是否要求设置默认值</li>
                                        <li><strong>requireValidator</strong>: 是否要求验证函数</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 模板规则 -->
                        <div class="bg-white p-6 rounded-lg shadow">
                            <h4 class="font-medium text-gray-900 mb-4">模板规则 (template)</h4>
                            <div class="space-y-4">
                                <p class="text-gray-600">检查模板语法和结构规范。</p>
                                <div class="bg-gray-50 p-4 rounded">
                                    <h5 class="font-medium text-gray-900 mb-2">选项说明：</h5>
                                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                        <li><strong>maxLength</strong>: 单行最大长度</li>
                                        <li><strong>requireKey</strong>: v-for是否必须绑定key</li>
                                        <li><strong>maxDepth</strong>: 模板最大嵌套深度</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="mb-12">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">自动修复配置</h3>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="space-y-4">
                            <p class="text-gray-600">配置自动修复行为。</p>
                            <div class="bg-gray-50 p-4 rounded">
                                <h5 class="font-medium text-gray-900 mb-2">选项说明：</h5>
                                <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                    <li><strong>safeMode</strong>: 启用安全模式，只应用无风险的修复</li>
                                    <li><strong>backup</strong>: 修复前自动备份文件</li>
                                    <li><strong>ignoreFiles</strong>: 排除不需要分析的文件</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">格式化配置</h3>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="space-y-4">
                            <p class="text-gray-600">代码格式化相关配置。</p>
                            <div class="bg-gray-50 p-4 rounded">
                                <h5 class="font-medium text-gray-900 mb-2">选项说明：</h5>
                                <ul class="list-disc pl-5 space-y-2 text-gray-600">
                                    <li><strong>indentSize</strong>: 缩进空格数</li>
                                    <li><strong>maxLineLength</strong>: 每行最大长度</li>
                                    <li><strong>singleQuote</strong>: 使用单引号</li>
                                    <li><strong>semi</strong>: 是否使用分号</li>
                                    <li><strong>trailingComma</strong>: 尾随逗号设置</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <footer class="bg-white">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
            <div class="flex justify-center space-x-6 md:order-2">
                <a href="https://github.com/lq0910/vuesage" class="text-gray-400 hover:text-gray-500">
                    <span class="sr-only">GitHub</span>
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                    </svg>
                </a>
            </div>
            <div class="mt-8 md:mt-0 md:order-1">
                <p class="text-center text-base text-gray-400">
                    &copy; 2024 VueSage. All rights reserved.
                </p>
            </div>
        </div>
    </footer>
</body>
</html> 